<template>
	<view class="page">
		<view class="phone">
			<text>联系电话</text>
			<input v-model="phone" type="number" placeholder="您的联系电话仅工作人员可见" />
		</view>
		<view class="textarea-box">
			<textarea
				auto-height
				:maxlength="maxlength"
				placeholder="请将您的建议或遇到的问题反馈给我们，帮助我们做得更好"
				@input="handleInput"
			/>
			<text class="currentWordLength">{{ currentWordLength}}/{{maxlength}}</text>
		</view>
		<view class="btn">
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
import { submitFeedback } from '@/api/feedback'
	export default {
		data() {
			return {
				phone: '',
				content: '',
				currentWordLength: 0,
				maxlength: 400
			};
		},
		methods: {
			handleInput(e) {
				this.currentWordLength = e.detail.cursor
				if (e.detail.value.length > 400) {
					return
				}
				this.content = e.detail.value
			},
			submit() {
				const token = uni.getStorageSync('token')
				submitFeedback({ token, phone: this.phone, content: this.content }).then(res => {
					const { status } = res
					if (status == 200) {
						uni.showToast({
							title: '成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100%;
	min-height: 100vh;
	background: #eee;
	color: #222;
}
.phone {
	height: 80rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 0 20rpx;
	background: #fff;
	input {
		flex: 1;
		height: 100%;
		padding-left: 20rpx;
	}
}
.textarea-box {
	position: relative;
	width: 100%;
	padding: 20rpx;
	margin-bottom: 20rpx;
	background: #fff;	
	textarea {
		width: 100%;
		min-height: 250rpx;
		margin-bottom: 28rpx;
	}
	.currentWordLength {
		position: absolute;
		bottom: 0;
		right: 5rpx;
		font-size: 28rpx;
		color: #999;
	}
}
.btn {
	button {
		width: 90%;
		border-radius: 10rpx;
		background: #E76625;
		color: #fff;
	}
}
</style>
